<template>
  <div>
	  <myheader></myheader>

	<section class="featured-block text-center">
		<div class="container">
      <div>
        <breadcrumb :datas="datas"></breadcrumb>
      </div>

      <table>
        <tr>
          <td>用户名</td>
          <input type="text" v-model="username" placeholder="请输入用户名">
        </tr>
        <tr>
          <td>用户密码</td>
          <input type="password" v-model="password" >
        </tr>
        <tr>
          <td>用户手机号码</td>
          <input type="text" v-model="phone" placeholder="请输入电话号码">
        </tr>
        <tr>
          <td></td>
          <Button color="blue" @click="submit">提交</Button>
        </tr>
      </table>
			

		</div>
	</section>
	

	
	
	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>
    
</div>
  
</template>


 
<script>
//导入组件
import myheader from './myheader.vue'


export default {
  data () {
    return {
      msg: "这是一个变量",
      //面包屑导航变量
      datas:[{title:'首页',route:{name:'index'}},{title:'注册页面'}],
      //表单数据
      username:'',
      password:'',
      phone:''
    }
  },
  components: {
	  'myheader':myheader
  },
  methods: {
    //定义提交事件
    submit(){
      //非空验证
      if(this.username==''){
        this.$Message('您没用输入用户名')
        return false
      }
      if(/^1[3578]\d{9}$/.test(this.phone)){
      }
      else{
        this.$Message('您输入的手机号码有误')
        return false
      }
      
      //请求后台接口
      this.axios.get('http://127.0.0.1:8000/register/',{params:{username:this.username,password:this.password,phone:this.phone}})
      .then(res=>{
      console.log(res)

      this.$Message(res.data.message)
      })
     
    }


  },
 
}


</script>
 
<style>
/* //标签选择器 */
td{
  padding: 10px
}


</style>